<template>
  <div class="x-content">
    <div class="x-step">
      <div class="x-head">
        <div class="x-line"></div>
        <div class="x-text"></div>
      </div>
      <div class="x-main">
        <div class="x-part_1">
          <span class="x-where">经办人</span>
          <ul>
            <li class="x-pass">
              <div class="logo"></div>
              <span>审查通过</span>
            </li>
            <li class="x-checkMan">
              <span>审查人：</span>
              <span>李明</span>
            </li>
            <li class="x-Date">2019/06/30</li>
          </ul>
        </div>
        <div class="x-part_2">
          <span>经办人意见：</span>
          <span>同意</span>
        </div>
      </div>
    </div>

    <div class="x-step">
      <div class="x-head">
        <div class="x-line"></div>
        <div class="x-text"></div>
      </div>
      <div class="x-main">
        <div class="x-part_1">
          <span class="x-where">复核人</span>
          <ul>
            <li class="x-refuse">
              <div class="logo"></div>
              <span>审查不通过</span>
            </li>
            <li class="x-checkMan">
              <span>审查人：</span>
              <span>李明</span>
            </li>
            <li class="x-Date">2019/06/30</li>
          </ul>
        </div>
        <div class="x-part_2">
          <span>经办人意见：</span>
          <span>不同意</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "checkProcess",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped lang="scss">
ul{
  list-style: none;
}
.x-content {
  margin-top: 20px;
  background-color: #fff;
  padding: 30px 400px 30px 40px;
  .x-step {
    display: flex;
    .x-head {
      flex-grow: 0;
      position: relative;
      .x-text {
        width: 24px;
        height: 24px;
        border: 2px solid rgba(251, 163, 48, 1);
        border-radius: 50%;
        position: relative;
        background-color: #fff;
      }
      .x-text:after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background: rgba(251, 163, 48, 1);
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .x-line {
        position: absolute;
        top: 0;
        left: 11px;
        width: 2px;
        height: 100%;
        background: rgba(251, 163, 48, 1);
      }
    }
  }
  .x-step:last-of-type {
    .x-line {
      display: none;
    }
  }
  .x-main {
    flex-grow: 1;
    margin-left: 20px;
    .x-part_1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      span.x-where {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(77, 77, 77, 1);
      }
      ul {
        display: flex;
        align-items: center;
        li {
          margin-right: 30px;
        }
        li:first-child {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: rgba(77, 77, 77, 1);
          display: flex;
          align-items: center;
        }
        li.x-pass > div.logo {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: rgba(70, 203, 128, 1);
          border-radius: 8px;
          position: relative;
          margin-right: 5px;
        }
        li.x-pass > div.logo:before {
          content: "";
          display: inline-block;
          width: 4px;
          height: 8px;
          border-bottom: 1px solid #fff;
          border-right: 1px solid #fff;
          position: absolute;
          left: 6px;
          top: 3px;
          transform: rotate(45deg);
        }
        li.x-refuse > div.logo {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: #ff4747;
          border-radius: 8px;
          position: relative;
          margin-right: 5px;
        }
        li.x-refuse > div.logo:before {
          content: "x";
          display: inline-block;
          position: absolute;
          left: 4.3px;
          top: -3.5px;
          color: #fff;
        }
        li:nth-child(2) {
          font-size: 14px;
          font-family: PingFang SC;
          span:first-child {
            color: #a6a6a6;
          }
          span:last-child {
            color: #4d4d4d;
          }
        }
        li:last-child {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: rgba(166, 166, 166, 1);
        }
      }
    }
    .x-part_2 {
      padding: 20px;
      background-color: rgba(243, 244, 245, 1);
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      margin-bottom: 40px;
      span:first-child {
        color: #a6a6a6;
      }
      span:last-child {
        color: #4d4d4d;
      }
    }
  }
}
</style>